<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix ">
                <span class="my-3 text-xl">发布信息</span>
            </div>
            <div class="mb-3">
                类型：
                <el-select v-model="aid" placeholder="请选择" @change="change">
                    <el-option
                        v-for="item in articles"
                        :key="item.value"
                        :label="item.title"
                        :value="item.id">
                        <span style="float: left">{{ item.title }}</span>
                    </el-option>
                </el-select>
            </div>
            <el-divider></el-divider>

            <el-form :model="article" label-width="100px">
                <div v-if="article">
                    <div v-for="(field, index) in article.fields" :key="index">
                        <el-form-item :label="field.title" v-if="field.show">
                            <component v-bind:is="`field-${field.type}`" :field="field" :form="form"
                                       :alert="alert"></component>
                            <!--  【最终目标是提交form】 动态渲染组件，type的值是inut、textarea、editor等  :name="field.name"为自定义的字段,如author，url, 子组件中用v-model="form[field.name]"，初始状态form={}为空-->
                            <!--     被渲染的组件为form[field.type]-->
                            <hd-error :name="field.name"/>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <el-button type="success" class="mt-3" @click="onSubmit">保存提交</el-button>
        </el-card>
    </div>
</template>

<script>
const form = {}
export default {
    route: {name: 'auth.publish', meta: {requiresAuth: true}},
    props: ['id'],
    data() {
        return {
            aid: '',
            name: '',
            articles: [],
            form: {},
            article: {},
            alert: {title: "格式为1280px*320px", type: 'success'},
        }
    }
    ,
    async created() {
        //获取所有模型
        this.articles = await this.axios.get(`article/publish`)
    }
    ,
    methods: {
        async onSubmit() {
            await this.axios.post(`admin/article/${this.article.id}/${this.name}`, this.form)
            this.$router.push({name: 'index.index'})
        }
        ,
        change() {
            switch (this.aid) {
                case 1:
                    this.name = 'house';
                    this.article = this.articles[this.aid - 1]
                    console.log('house', this.aid)
                    break;
                case 2:
                    this.name = 'used';
                    this.article = this.articles[this.aid - 1]

                    console.log('used', this.aid)

                    break;
                case 3:
                    this.name = 'car';
                    this.article = this.articles[this.aid - 1]

                    console.log('car', this.aid)

                    break;
                case 4:
                    this.name = 'pet';
                    this.article = this.articles[this.aid - 1]
                    console.log('pet', this.aid)

                    break;
                default:
                    this.name = ''

            }
        }
    }
}
</script>

<style scoped>

</style>
